<template>
    <div class="content">
        <el-form style="margin-top: 20px;" ref="form" :model="formModel" :rules="rules" label-width="120px" label-position="top">
            <el-form-item label="功能服务：">
                <!-- 图文列表内容区域 -->
                <div style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;">
                    <div style="display: flex;flex-direction: column;margin: 10px;padding: 10px;border: 1px solid #eee;" v-for="(item, index) in formModel.advertList" :key='index'>
                        <div style="display: flex;flex-direction: row;align-items: center;">
                            <div style="flex-shrink: 0;font-size: 14px;margin-left: 10px;">标识：</div><div style="flex-shrink: 0;font-size: 14px;font-weight: bold;">{{item.content}}</div>
                            <div style="flex-shrink: 0;font-size: 14px;margin-left: 20px;">是否显示：</div>
                            <el-radio v-model="item.isShow" :label='true'>是</el-radio>
                            <el-radio v-model="item.isShow" :label='false'>否</el-radio>
                        </div>
                        <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;">
                            <div style="display: flex;flex-direction: row;align-items: center;"><div style="flex-shrink: 0;">序号：</div><el-input style="width: 60px;" v-model="item.sort" size="mini"></el-input></div>
                            <div style="flex-shrink: 0;font-size: 14px;margin-left: 10px;">标题：</div><el-input v-model="item.title" size="mini"></el-input>
                        </div>
                        <div style="margin-top: 10px;display: flex;flex-direction: row;">
                            <div style="flex-shrink: 0;font-size: 14px;">标题颜色：</div>
                            <el-input size="mini" style="width: 100px;"  v-model="item.colorForTitle"></el-input>
                            <el-color-picker v-model="item.colorForTitle"></el-color-picker>
                            <div style="flex-shrink: 0;margin-left: 20px;">标题大小：</div><div><el-input style="width: 60px;" v-model="item.fontsizeForTitle"></el-input></div>
                        </div>
                        <div style="margin-top: 10px;display: flex;flex-direction: row;">
                            <div style="flex-shrink: 0;font-size: 14px;">图标颜色：</div>
                            <el-input size="mini" style="width: 100px;"  v-model="item.colorForIcon"></el-input>
                            <el-color-picker v-model="item.colorForIcon"></el-color-picker>
                            <div style="flex-shrink: 0;margin-left: 20px;">图标大小：</div><div><el-input style="width: 60px;" v-model="item.sizeForIcon"></el-input></div>
                        </div>
                        <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;">
                            <div style="flex-shrink: 0;font-size: 14px;margin-left: 10px;">图标标识：</div><el-input v-model="item.nameForIcon" size="mini"></el-input>
                        </div>
                    </div>
                </div>
            </el-form-item>
          </el-form>
    </div>
</template>

<script>
    export default {
        components: {
            
        },
        props:{
            formModel:{
                type: Object,
                default: res=>{}
            }
        },
        data() {
            return {
                checkedService: [],
                serviceDict: {},
                rules: {
                    text1: [{ required: true, message: '请输入', trigger: 'blur' }]
                },
            }
        },
        created(){
            this.serviceDict = this.tools.paramsToObj(this.formModel.options1)
        },
        methods:{
            //子组件校验，传递到父组件
            validateForm () {
                let flag = false
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        var service = ''
                        if(this.checkedService.length>0){
                            for(var item of this.checkedService){
                                service = service+item+'=1&'
                            }
                            service = service.substring(0, service.length-1)
                        }
                        this.formModel.options1 = service
                        
                        flag = true
                    } else {
                        flag = false
                    }
                })
                return flag
            },
        }
    }
</script>